class Select {
    constructor() {
        this.ele = document.querySelectorAll('.gd-select:not(.gd-init-select)')
        this.beforeSelectEvent = () => {return true}
        this.selectedEvent = () => {}
        this.blurEvent = () => {}
    }
    init() {
        this.ele.forEach(item => {
            item.setAttribute('tabindex', 0)
            item.setAttribute('role', 'select')
            let str  = ''
            if(!item.innerHTML) {
                str += '<div class="gd-select-title">' +
                    '<div class="label"></div>' +
                    '<i class="iconfont icondown1"></i>' +
                    '</div>' +
                    '<div class="gd-select-wrap"></div>'
                item.innerHTML = str
            }
            const wrap = item.querySelector('.gd-select-wrap')
            const icon = item.querySelector('.gd-select-title .icondown1')
            item.addEventListener('focus', e => {
                if(this.beforeSelectEvent(e)) {
                    wrap.show()
                    if(icon){
                        icon.classList.add('is-reverse')
                    }
                }

            })
            const options = wrap.querySelectorAll('li')
            if(options.length > 0 && !wrap.querySelector('.is-active')) {
                options[0].classList.add('is-active')
            }
            const label = item.querySelector('.gd-select-title .label')
            options.forEach(option => {
                option.setAttribute('role', 'option')
                if(option.classList.contains('is-active')) {
                    option.setAttribute('aria-selected', true)
                } else {
                    option.setAttribute('aria-selected', false)
                }
                option.addEventListener('click', e => {
                    if(!e.target.classList.contains('is-active')) {
                        label.innerText = e.target.innerText
                        const lastedActive = e.target.parentElement.querySelector('.is-active')
                        lastedActive.classList.remove('is-active')
                        lastedActive.setAttribute('aria-selected', false)
                        e.target.classList.add('is-active')
                        e.target.setAttribute('aria-selected', true)

                        //自定义选中事件
                        this.selectedEvent(e)

                        item.blur()
                    }
                })
            })

            item.addEventListener('blur', e => {
                wrap.hide()
                if(icon) {
                    icon.classList.remove('is-reverse')
                }
                this.blurEvent(e)
            })

            item.classList.add('gd-init-select')
        })
    }
    setElement(ele) {
        ele.forEach(item => {
            if(!item.classList.contains('gd-select')) {
                console.warn('please select gd-select element')
                return false
            }
        })
        this.ele = ele
    }
    setBeforeSelectEvent(func) {
        if(typeof func === 'function') {
            this.beforeSelectEvent = func
        } else {
            console.error('before-select event need function type')
        }
    }
    setSelectedEvent(func) {
        if(typeof func === 'function') {
            this.selectedEvent = func
        } else {
            console.error('selected event need function type')
        }
    }
    setBlurEvent(func) {
        if(typeof func === 'function') {
            this.blurEvent = func
        } else {
            console.error('blur event need function type')
        }
    }
}
export {
    Select
}
